<!--
 * @Author: chunlai
 * @Date: 2023-12-19 16:45:09
 * @LastEditTime: 2025-09-05 08:49:19
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \02.bldinsure\src\views\healthy\lists\Common.vue
 * @Description: 公共配置告知
-->
<template>
  <div class="healthy-lists">
    <div class="notice-mode-head">
      <div class="head-box">请逐个阅读并如实填写以下告知</div>
    </div>
    <div class="notice_box">
      <div
        class="notice_item"
        v-for="(item, index) in viewList"
        :key="`${item.label}${index}`"
      >
        <span class="item_label" v-if="['tbr', 'bbr'].includes(item.type)">
          {{ item.label }} <b>{{ item.name }}</b> 告知
        </span>
        <span class="item_label" v-else>{{ item.label }}</span>
        <div class="flex-end" @click="showAction(item)">
          <span class="font1" v-if="item.isFinished">已填写</span>
          <span class="font2" v-else>未填写</span>
          <span class="ms-row-icon ml4"></span>
        </div>
      </div>
    </div>
    <div class="refresh-mode" @click="getNoticeStatus">
      <MsImgIcon size="14" name="refresh" class="mr6" /> 刷新查看告知填写进度
    </div>
    <FooterBtns btnNum="1" rightText="确定" @saveForm="nextStep" />
    <ShareMask
      :target="target"
      @close="showMask = false"
      v-if="showMask"
    ></ShareMask>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import ShareMask from "../components/ShareMask";
export default {
  name: "CommonNoticeListPage",
  components: { ShareMask },
  data() {
    return {
      lists: [],
      showMask: false,
      target: {},
    };
  },
  computed: {
    ...mapGetters({
      applicant: "insert/applicant",
      showedRisks: "risks/showedRisks",
      healthyLists: "page/healthyLists",
      apiBbrMult: "insert/apiBbrMult",
      tbrPrvinCapital: "insert/tbrPrvinCapital",
      selfInsuredRegions: "dictionary/selfInsuredRegions",
    }),
    writeFinish() {
      let doneLabel = false;
      let tempArr = this.lists;
      for (let i = 0; i < tempArr.length; i++) {
        if (tempArr[i].isShow) {
          if (!tempArr[i].isFinished) {
            doneLabel = false;
            return false;
          } else {
            doneLabel = true;
          }
        }
      }
      return doneLabel;
    },
    viewList() {
      return this.lists.filter((item) => item.isShow);
    },
  },
  watch: {},
  created() {
    this.$store.commit("updateLoad", false);
    let temArr = this.healthyLists;
    const isSelfRela = this.apiBbrMult.find(
      (ele) => ele.relationToAppnt == "4"
    );
    temArr.forEach((item) => {
      if (item.type === "tbr") {
        item.name = this.applicant.name || "";
        item.isShow = isSelfRela ? false : true;
      } else if (item.type === "dlr") {
        // 默认配置即显示
        // item.isShow = this.hasAgentNotice
      } else if (item.type === "chongqing") {
        item.isShow = this.tbrPrvinCapital === "500000";
      } else if (item.type === "recall") {
        const provns = this.selfInsuredRegions || [];
        item.isShow = provns.includes(this.tbrPrvinCapital);
      }
    });
    /* == 多被保人 == */
    let hlist = [],
      bbrlist = [];
    const tbrItem = temArr.filter((t) => t.type == "tbr");
    const oItem = temArr.filter((t) => t.type != "tbr" && t.type != "bbr");
    const hasBbr = temArr.find((ele) => ele.type == "bbr");
    if (hasBbr) {
      const len = this.apiBbrMult.length;
      for (let b = 0; b < len; b++) {
        const item = this.apiBbrMult[b];
        const obj = {
          type: "bbr",
          value: "2",
          index: b,
          idNum: `${item.idNum || ""}`,
          name: `${item.name || ""}`,
          label: "被保险人",
          isShow: true,
          isFinished: false,
          goUrl: `notify?type=bbr&idx=${b}`,
        };
        bbrlist.push(obj);
      }
    }
    // 附属被保人不需要健康告知
    if (this.mainRiskCode == "110176") {
      bbrlist = bbrlist.slice(0, 1);
    }
    hlist = [...tbrItem, ...bbrlist, ...oItem];
    /* == 多被保人 == */
    this.lists = hlist;
    this.getNoticeStatus();
  },
  mounted() {},
  methods: {
    showAction(item) {
      if (this.disabledEdit) {
        // 直接跳转,查看
        if (item.goUrl) {
          this.$router.push(`/${item.goUrl}`);
        }
        return;
      }
      this.target = item;
      this.showMask = true;
    },
    nextStep() {
      if (this.disabledEdit) return this.forbidChange();
      // 签名数据校验
      if (!this.writeFinish) return this.$msAlert(`请完成投保告知的填写`);
      this.$router.push("/files");
    },
    /**获取告知进度 */
    getNoticeStatus() {
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: this.apiComParams,
          apiName: "queryImpartsFlag",
          toast: true,
        })
        .then((data) => {
          let {
            hasAppntImparts,
            hasInsuredImparts,
            hasCqImparts,
            hasAgentImparts,
            hasUiImparts,
          } = data.impartsFlag;
          this.lists.forEach((item) => {
            if (item.type === "tbr") {
              item.isFinished = hasAppntImparts == "Y" ? true : false;
            }
            if (item.type === "bbr") {
              item.isFinished = hasInsuredImparts.includes(item.idNum);
            }
            if (item.type === "chongqing") {
              item.isFinished = hasCqImparts == "Y" ? true : false;
            }
            if (["recall", "dlr"].includes(item.type)) {
              item.isFinished = hasAgentImparts == "Y" ? true : false;
            }
            if (item.type === "wnx") {
              item.isFinished = hasUiImparts == "Y" ? true : false;
            }
          });
        });
    },
  },
};
</script>
<style lang="less" scoped>
@import "../style.less";
.notice_box {
  padding: 0 12px;
  min-height: 40px;
}

.notice_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 15px;

  &:active {
    opacity: 0.7;
  }

  .item_label {
    line-height: 1;
    b {
      color: #ff8d1a;
      font-weight: 400;
    }
  }

  .font1 {
    color: #43cf7c;
  }

  .font2 {
    color: #a6a6a6;
  }
}
</style>
